<template>
  <el-row class="big-screen-box-b">
    <el-col :span="24" class="b-s-c">
      <!-- left -->
      <div class="b-s-c-l">
        <div class="b-s-c-l-1">
          <div class="index-title">男女分布情况</div>
          <div class="car-box1">
            <div v-for="(item,index) in leftListCard" :key="index" class="car-item">
              <el-image class="car-item-img" :src="item.img" fit="cover"></el-image>
              <div class="car-item-text">{{item.text}}</div>
              <div class="car-item-value">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="b-s-c-l-2">
          <div class="index-title">重点人群统计</div>
          <div class="car-box2">
            <div v-for="(item,index) in pCountCard" :key="index" class="car-item">
              <div
                class="car-item-value"
                :style="{
                  color:item.color
                }"
                :class="`border${index+1}`"
              >{{item.value}}</div>
              <div class="car-item-text">{{item.text}}</div>
            </div>
          </div>
        </div>
        <div class="b-s-c-l-5">
          <div class="index-title">房屋结构</div>
          <div class="car-box1">
            <div v-for="(item,index) in fwListCard" :key="index" class="car-item">
              <div class="car-item-text">{{item.text}}</div>
              <div class="car-item-value">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="b-s-c-l-3">
          <div style="height:100%;width:100%">
            <div
              class="index-title flex"
              style="width:90%;justify-content: space-between !important;"
            >
              <div>户籍省份分布</div>
              <div style="font-size:0.6vw">单位：人</div>
            </div>
            <hjChar style="width:100%;height:100%;"></hjChar>
          </div>
        </div>
        <div class="b-s-c-l-4">
          <div class="index-title" style="flex:0.1">户籍统计</div>
          <div class="vlue-title">
            <div v-for="(item,index) in hjCountCard" :key="index" class="v-t-box">
              <div class="text">{{item.text}}</div>
              <div class="value">{{item.value}}</div>
            </div>
          </div>
          <div style="width:100%;height:100%;flex:0.8">
            <hjtjChar style="width:100%;height:100%"></hjtjChar>
          </div>
        </div>
      </div>
      <!-- center -->
      <div class="b-s-c-c">
        <div class="b-s-c-c-1">
          <div class="b-c-user-box">
            <div class="border-jiao left-top"></div>
            <div class="border-jiao right-top"></div>
            <div class="border-jiao left-bottom"></div>
            <div class="border-jiao right-bottom"></div>
            <el-image :src="require('@/assets/index/user.png')" class="u-img"></el-image>
            <div class="u-info">预警：西南入口，19:25分陌生人进入一名</div>
          </div>
          <div class="b-s-c-c-1-text1">平沙小学</div>
          <div class="b-s-c-c-1-yuan-red"></div>
          <div class="b-s-c-c-1-text2">平沙街</div>
          <div class="b-s-c-c-1-text3">华健门诊部</div>
          <div class="b-s-c-c-1-yuan-h"></div>
          <div class="b-c-user-box2">
            <div class="border-jiao left-top"></div>
            <div class="border-jiao right-top"></div>
            <div class="border-jiao left-bottom"></div>
            <div class="border-jiao right-bottom"></div>
            <div class="u-info">
              车道：G362国道有二十米拥
              堵，预计拥堵时间10分
              钟。
            </div>
          </div>
          <div class="b-s-c-c-1-text4">平沙商贸广场</div>
          <div class="b-s-c-c-1-text5">平沙村文化广场</div>
        </div>
        <!-- <div class="b-s-c-c-1">
          <div id="container" style="height:100%;width:100%"></div>
        </div>-->
        <div class="b-s-c-c-2">
          <carChar style="width:100%;height:100%;padding:0.6vw"></carChar>
          <div class="index-title" style="position: absolute;right: 0;">单位：辆</div>
        </div>
        <div class="b-s-c-c-3">
          <nlChar style="width:100%;height:100%;padding:0.6vw" :charData="charData"></nlChar>
          <div class="index-title" style="position: absolute;right: 0;">单位：人</div>
        </div>
      </div>
      <!-- right -->
      <div class="b-s-c-r">
        <div class="b-s-c-r-1">
          <div class="index-title">地理介绍</div>
          <div class="b-s-c-r-1-title">增城佳大公寓</div>
          <div
            class="b-s-c-r-1-text"
          >增城佳大公寓地处增城新塘镇，位于汽车制造园区内。项目占地面积三万多平方米，项目占地面积三万多平方米，总建筑面积超十平方米。项目分两期建设，第一期已完成。</div>
        </div>
        <div class="b-s-c-r-2">
          <div class="index-title" style="flex:0.1;width: 100%;height: 100%;display: flex;">工业结构</div>
          <div class="car-box2">
            <div v-for="(item,index) in gyCountCard" :key="index" class="car-item">
              <huanChar :id="'huanChar' + index" :dataList="item" style="width:100%;height:100%"></huanChar>
              <!-- <span class="car-item-text">{{item.text}}</span> -->
            </div>
          </div>
        </div>
        <div class="b-s-c-r-3">
          <div class="index-title">关爱服务对象统计</div>
          <div class="car-box1">
            <div v-for="(item,index) in gaCountCard" :key="index" class="car-item">
              <div class="car-item-text">{{item.text}}</div>
              <div class="car-item-value">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="b-s-c-r-4">
          <sbChar style="width:100%;height:100%;padding:0.6vw"></sbChar>
        </div>
        <div class="b-s-c-r-5">
          <div class="index-title">网格资源</div>
          <div class="car-box1">
            <div v-for="(item,index) in wlCountCard" :key="index" class="car-item">
              <el-image class="car-item-img" :src="item.img" fit="cover"></el-image>
              <div class="car-item-text">{{item.text}}</div>
              <div class="car-item-value">{{item.value}}</div>
            </div>
          </div>
          <div class="bottom-title">
            <div style="margin-left:1vw">在线人数：56人</div>
            <div style="margin-right:1vw">巡查轨迹 l 实时位置</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import hjChar from "../chars/hjChar.vue";
import hjtjChar from "../chars/hjtjChar.vue";
import carChar from "../chars/carChar.vue";
import nlChar from "../chars/nlChar.vue";
import sbChar from "../chars/sbChar.vue";
import huanChar from "../chars/huanChar.vue";
// import { loadBaiDuMap } from "../../bmpgl_lib.js";

export default {
  components: {
    hjChar,
    hjtjChar,
    sbChar,
    nlChar,
    huanChar,
    carChar
  },
  data() {
    return {
      // 男女分布情况
      leftListCard: [
        {
          id: 0,
          text: "总人数",
          value: 3000,
          img: require("../../assets/index/zong.png")
        },
        {
          id: 1,
          text: "男性人数",
          value: 1940,
          img: require("../../assets/index/nan.png")
        },
        {
          id: 2,
          text: "女性人数",
          value: 1060,
          img: require("../../assets/index/nv.png")
        }
      ],
      // 房屋结构
      fwListCard: [
        {
          id: 0,
          text: "出租屋",
          value: 2162
        },
        {
          id: 1,
          text: "酒店",
          value: 1940
        },
        {
          id: 2,
          text: "小区",
          value: 1060
        },
        {
          id: 3,
          text: "公寓",
          value: 1060
        }
      ],
      // 重点人群统计
      pCountCard: [
        {
          id: 0,
          text: "涉毒人员",
          value: 235,
          color: "#E94C58"
          // border: 6px solid #e94c58 !important;
        },
        {
          id: 1,
          text: "案底人员",
          value: 132,
          color: "#F58B52"
          // border: 6px solid #f58b52 !important;
        },
        {
          id: 2,
          text: "信访人员",
          value: 334,
          color: "#0AD49B"
          // border: 6px solid #0ad49b !important;
        },
        {
          id: 3,
          text: "涉邪人员",
          value: 49,
          color: "#EBD502"
          // border: 6px solid #ebd502 !important;
        }
      ],
      // 工业结构
      gyCountCard: [
        {
          id: 0,
          text: "小作坊",
          value: 111,
          name: "50%",
          color: "#E94C58"
        },
        {
          id: 1,
          text: "工业园",
          value: 222,
          name: "25%",
          color: "#3478FF"
        },
        {
          id: 2,
          text: "物流园",
          value: 333,
          name: "25%",
          color: "#3478FF"
        }
      ],
      // 户籍统计
      hjCountCard: [
        {
          id: 0,
          text: "户籍人口",
          value: 2162
        },
        {
          id: 1,
          text: "流动人口",
          value: 2162
        }
      ],
      // 关爱
      gaCountCard: [
        {
          id: 0,
          text: "精神病人",
          value: 2162
        },
        {
          id: 1,
          text: "优抚对象",
          value: 1940
        },
        {
          id: 2,
          text: "低保户",
          value: 1060
        },
        {
          id: 3,
          text: "残疾人",
          value: 2162
        },
        {
          id: 4,
          text: "退伍军人",
          value: 2162
        },
        {
          id: 5,
          text: "独居老人",
          value: 2162
        }
      ],
      // 网格资源
      wlCountCard: [
        {
          id: 0,
          text: "网格员",
          value: 3000,
          img: require("../../assets/index/icon1.png")
        },
        {
          id: 1,
          text: "志愿者",
          value: 1940,
          img: require("../../assets/index/icon2.png")
        },
        {
          id: 2,
          text: "巡逻员",
          value: 1060,
          img: require("../../assets/index/icon3.png")
        }
      ],
      charData: [148, 300, 400, 556, 758, 898, 220, 162, 60, 50]
    };
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    // initMap() {
    //   // 传入密钥获取地图回调。
    //   loadBaiDuMap()
    //     .then(BMapGL => {
    //       // 创建地图实例
    //       let map = new BMapGL.Map("container");
    //       // 创建点坐标 axios => res 获取的初始化定位坐标
    //       let point = new BMapGL.Point(113.262851, 23.253817);
    //       // 初始化地图，设置中心点坐标和地图级别
    //       map.centerAndZoom(point, 20);
    //       //开启鼠标滚轮缩放
    //       map.enableScrollWheelZoom(true);
    //       console.log(map);
    //       map.setHeading(2);
    //       map.setTilt(73);
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.width {
  width: 100%;
}
.height {
  height: 100%;
}
.box {
  background: #0e1348;
  border: 0.2vw solid #225bc3;
  border-radius: 0.5vw;
}
.index-title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #cbd7fa;
  font-size: 0.8vw;
  padding: 0.6vw;
}
.border-jiao {
  position: absolute;
  border: 0.18vw solid #41c7e3;
  width: 0.4vw;
  height: 0.4vw;
}

.big-screen-box-b {
  .width;
  .height;
  // center
  .b-s-c {
    height: 100%;
    padding: 0 2.5vw;
    display: flex;
    justify-content: center;
    padding-bottom: 1.5%;
    // left
    .b-s-c-l {
      flex: 0.28;
      .width;
      .height;
      .flex;
      flex-direction: column;
      .b-s-c-l-1 {
        flex: 0.07;
        margin: 0.25vw 0;
        color: #fff;
        .width;
        .height;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 1.5vw;
              height: 1.5vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
      .b-s-c-l-5 {
        flex: 0.06;
        margin: 0.25vw 0;
        color: #fff;
        .width;
        .height;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 1.5vw;
              height: 1.5vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
      .b-s-c-l-2 {
        flex: 0.07;
        margin: 0.25vw 0;
        .width;
        .height;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .car-box2 {
          .flex;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .flex;
            flex-direction: column;
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding: 0.7vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.8vw;
              border-radius: 50%;
              height: 2.4vw;
              width: 2.4vw;
              display: flex;
              .flex;
            }
            .border1 {
              border: 0.25vw solid #e94c58 !important;
            }
            .border2 {
              border: 0.25vw solid #f58b52 !important;
            }
            .border3 {
              border: 0.25vw solid #0ad49b !important;
            }
            .border4 {
              border: 0.25vw solid #ebd502 !important;
            }
          }
        }
      }
      .b-s-c-l-3 {
        flex: 0.3;
        margin: 0.25vw 0;
        .width;
        .height;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
      }
      .b-s-c-l-4 {
        flex: 0.5;
        margin: 0.25vw 0;
        .width;
        .height;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .vlue-title {
          .flex;
          flex: 0.1;
          width: 100%;
          color: #fff;
          .v-t-box {
            flex: 1;
            .flex;
            flex-direction: column;
            .text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
            }
            .value {
              font-weight: bold;
              font-size: 1.2vw;
            }
          }
        }
      }
    }
    // center
    .b-s-c-c {
      flex: 0.45;
      .width;
      .height;
      .flex;
      flex-direction: column;
      padding: 0 5vw;
      .b-s-c-c-1 {
        flex: 0.55;
        width: 100%;
        margin: 0.25vw 0;
        height: 100%;
        // background: url("../../assets/c-bg.png") no-repeat 50%;
        // background-size: 83%;
        background: url(../../assets/c-bg.png) no-repeat 15%;
        background-size: 150%;
        position: relative;
        padding: 0.6vw;
        .b-c-user-box {
          position: absolute;
          top: 17%;
          left: 5%;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          width: 11vw;
          height: 6vw;
          .flex;
          flex-direction: column;
          padding: 0.6vw;
          .u-img {
            height: 5vw;
            width: 7.5vh;
          }
          .u-info {
            font-weight: 400;
            color: #ffffff;
            line-height: 32px;
            font-size: 0.7vw;
            margin-top: 0.7vw;
            position: relative;
          }
          .left-top {
            left: 0;
            top: 0;
            border-right: none;
            border-bottom: none;
          }
          .right-top {
            right: 0;
            top: 0;
            border-left: none;
            border-bottom: none;
          }
          .left-bottom {
            left: 0;
            bottom: 0;
            border-right: none;
            border-top: none;
          }
          .right-bottom {
            right: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
          }
        }
        .b-c-user-box2 {
          position: absolute;
          top: 40%;
          left: 68%;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          width: 8vw;
          height: 4vw;
          .flex;
          flex-direction: column;
          .u-info {
            font-weight: 400;
            color: #ffffff;
            line-height: 32px;
            font-size: 0.7vw;
            margin-top: 0.8vw;
            position: relative;
          }
          .left-top {
            left: 0;
            top: 0;
            border-right: none;
            border-bottom: none;
          }
          .right-top {
            right: 0;
            top: 0;
            border-left: none;
            border-bottom: none;
          }
          .left-bottom {
            left: 0;
            bottom: 0;
            border-right: none;
            border-top: none;
          }
          .right-bottom {
            right: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
          }
        }
        .b-s-c-c-1-text1 {
          position: absolute;
          top: 29%;
          left: 40%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text2 {
          position: absolute;
          top: 59%;
          left: 39%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text3 {
          position: absolute;
          top: 18%;
          left: 61%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text4 {
          position: absolute;
          top: 64%;
          left: 65%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text5 {
          position: absolute;
          top: 80%;
          left: 55%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-yuan-red {
          position: absolute;
          top: 49%;
          left: 33%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
          width: 2vw;
          height: 2vw;
          background: url("../../assets/index/yuan-red.png") no-repeat 50%;
          background-size: cover;
        }
        .b-s-c-c-1-yuan-h {
          position: absolute;
          top: 28%;
          left: 63%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
          width: 2vw;
          height: 2vw;
          background: url("../../assets/index/yuan-h.png") no-repeat 50%;
          background-size: cover;
        }
      }
      .b-s-c-c-2 {
        flex: 0.225;
        width: 100%;
        margin: 0.25vw 0;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
      }
      .b-s-c-c-3 {
        flex: 0.225;
        width: 100%;
        margin: 0.25vw 0;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
      }
    }
    // right
    .b-s-c-r {
      flex: 0.26;
      .width;
      .width;
      .height;
      .flex;
      flex-direction: column;
      .b-s-c-r-1 {
        flex: 0.18;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        .b-s-c-r-1-title {
          font-weight: 400;
          color: #ffffff;
          background: #3478ff;
          border-radius: 5px;
          width: 6vw;
          height: 1.2vw;
          font-size: 0.8vw;
          padding: 0.2vw;
          margin-left: 0.6vw;
        }
        .b-s-c-r-1-text {
          font-weight: 400;
          color: #ffffff;
          margin-left: 0.6vw;
          font-size: 0.7vw;
          margin-right: 3vw;
          margin-top: 0.3vw;
          line-height: 1.5;
        }
      }
      .b-s-c-r-2 {
        flex: 0.19;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        .car-box2 {
          .flex;
          flex: 0.9;
          width: 100%;
          height: 100%;
          flex-direction: row;
          .car-item {
            .flex;
            height: 8vh;
            width: 9vh;
            flex-direction: column;
            div {
              div {
                width: 100% !important;
                height: 100% !important;
              }
            }
            canvas {
              width: 100% !important;
              height: 100% !important;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.8vw;
              padding-bottom: 0.5vw;
            }
          }

          .car-item:nth-child(2) {
            margin: 0 2vh;
          }
        }
      }
      .b-s-c-r-3 {
        flex: 0.2;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          .car-item {
            width: 33%;
            margin: 0.2vw 0;
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
      .b-s-c-r-4 {
        flex: 0.28;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        position: relative;
      }
      .b-s-c-r-5 {
        flex: 0.23;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        position: relative;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 2vw;
              height: 2vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
        .bottom-title {
          width: 100%;
          position: absolute;
          bottom: 0;
          height: 1.5vw;
          background: #3478ff;
          border-radius: 0px 0px 0.4vw 0.4vw;
          .flex;
          justify-content: space-between;
          font-weight: 400;
          color: #ffffff;
          line-height: 65px;
          font-size: 0.7vw;
        }
      }
    }
  }
}
</style>
